import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { Ref, useContext, useEffect, useMemo, useRef, useState } from 'react';
import { UpdateAssetService, exportAssetChangeExportService } from '../services/UpdateAssetService';
import { assetTableConfig } from '../mconfig/UpdateTableColumns';
import { message } from 'antd';
import { onCloseModalCommon, fieldFlowExport } from '@/utils';
import { showTotalInfo } from '@/common/constVariable';
import { openAssetColumns } from './UpdateTableColumns';
import { AssetChangeManageAPI } from '../common/type';
import { AssetListManageContext } from './useManageContext';
import { IAssetListActionEnum } from './useManageReducer';
import { UpdateTableCommon } from './UpdateTableCommon';

export const OpenAssetModal: React.FC<AssetChangeManageAPI.IOpenMaterialModal> = ({ curRes, isShowModal, onClose }) => {
  /** 弹框的ref */
  const updateModalRef: Ref<IOneModalRef> = useRef(null);
  const { selectAssetList, styleFixCls, assetListDispatch, assetForm } = useContext(AssetListManageContext);

  /** 导出回调 */
  const exportCallback = (res: any) => {
    if (res.status) {
      message.error('导出失败！');
      //  onCloseModalCommon(updateModalRef);
    } else {
      /** 处理文件流 */
      fieldFlowExport(res, '资产信息数据.xlsx');
      onCloseModalCommon(updateModalRef);
    }
  };
  /**
   * 引入导出接口
   */
  const { exportAssetListExportRun, exportAssetListExportLoading } = exportAssetChangeExportService(exportCallback, curRes);

  /** 获取列表 */
  const { dataList, data, params, loading, pagination, searchList, loadMdicMapObj, getManageData } = UpdateAssetService(curRes);

  /** 暂时保存选中的值 */
  const [checkAssetList, setCheckAssetList] = useState<any>([]);

  /** 保存搜索参数 [传给导出弹窗] */
  const [searchParams, setSearchParmas] = useState<Record<string, any>>({});

  /** 搜索 */
  const onSearch = (payload: Record<string, any>) => {
    setSearchParmas(payload);
    getManageData({ ...payload });
  };

  /** 重置 */
  const onReset = (payload: Record<string, any>) => {
    getManageData({ ...payload });
  };

  /** 分页change 方法 */
  const onPageChange = (current: number, pageSize: number) => {
    getManageData({ ...params, current, pageSize });
  };

  /** 点击选中 */
  const onSelectTable = (selectInfo: Record<string, any>[]) => {
    setCheckAssetList(selectInfo);
  };

  /** 初始化 */
  useEffect(() => {
    getManageData({});
    setCheckAssetList(selectAssetList);
    // assetListDispatch({
    //   type: IAssetListActionEnum.SELECT_ASSET,
    //   payload: selectAssetList,
    // });
  }, [isShowModal]);

  /** 点击确定 */
  const onSave = () => {
    // assetListDispatch({
    //   type: IAssetListActionEnum.SELECT_ASSET,
    //   payload: checkAssetList,
    // });
    exportAssetListExportRun({
      ...searchParams,
      changeType: assetForm?.getFieldValue('changeType'),
    });
    // onCloseModalCommon(updateModalRef);
  };

  return (
    <>
      <OneModal
        open={true}
        getContainer={false}
        ref={updateModalRef}
        title={'资产列表'}
        onCancel={onClose}
        width={document.body.clientWidth * 0.65}
        bodyStyle={{
          height: document.body.clientHeight * 0.55,
          padding: 10,
        }}
        onOk={onSave}
        okText="导出"
        confirmLoading={exportAssetListExportLoading}
      >
        <UpdateTableCommon
          styleFixCls={styleFixCls}
          searchProps={{
            searchList,
            onReset,
            onSearch,
          }}
          selectTablePorps={{
            onSelectTable,
            selectRowObjList: checkAssetList,
            selectType: '',
            setCheckRows: setCheckAssetList,
          }}
          tableProps={{
            columns: assetTableConfig(),
            loading,
            dataSource: dataList ? dataList : [],
            pagination,
            onPageChange,
            rowKey: 'assetId',
            // tableTotalShow: (total: any, range: any) => {
            //   return (
            //     <div
            //       style={{
            //         display: 'flex',
            //         width: '100%',
            //         justifyContent: 'space-between',
            //       }}
            //     >
            //       <div>
            //         已选择<strong style={{ color: 'red' }}> {checkAssetList?.length} </strong>条资产
            //       </div>
            //       <div>{showTotalInfo(total, range)}</div>
            //     </div>
            //   );
            // },
          }}
        />
      </OneModal>
    </>
  );
};
